<template>
  <el-card>
    <!-- 顶部内容 -->
    <div class="header-container">

      <!-- 左侧内容 -->
      <div class="left">
        <div class="container-left">
          <el-input v-model="username"
                    placeholder="根据用户名搜索"
                    style="margin-right: 10px" />
          <el-button size="small"
                     @click="handleEmpty">清空</el-button>
          <el-button size="small"
                     type="primary"
                     style="background-color: #409eff; color:#fff"
                     @click="handleSearch">确定</el-button>
        </div>
      </div>
      <div class="right">
        <el-button type="success"
                   icon="el-icon-edit"
                   size="small"
                   style="background: #67c23a; color: #fff"
                   @click="showUserAdd= true">新增用户</el-button>
      </div>

    </div>
    <!-- 文字提示 -->
    <el-alert title="消息提示的文案"
              type="info"
              show-icon
              :closable="false" />
    <!-- 表格区域 -->
    <el-table :data="tableData">
      <el-table-column label="序号"
                       type="index"
                       :index="indexMethod"
                       width="180" />
      <el-table-column label="邮箱"
                       prop="email" />
      <el-table-column label="联系电话"
                       prop="phone" />
      <el-table-column label="用户名"
                       prop="username" />
      <el-table-column label="权限组名称"
                       prop="permission_group_title" />
      <el-table-column label="角色"
                       prop="role" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary"
                     icon="el-icon-edit"
                     circle
                     @click="handleEditDia(row.id)" />
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="handelUserDel(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :current-page="queryInfo.page"
                     :page-size="queryInfo.pagesize"
                     :page-sizes="[1, 2, 3, 10]"
                     layout=" sizes, prev, pager, next, jumper"
                     :total="total"
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!-- 新增弹框 -->
    <el-dialog title="新增用户"
               :visible="showUserAdd"
               width="50%"
               @close="handleAddClose">
      <el-form ref="form"
               :model="AddForm"
               label-width="150px">
        <el-form-item label="用户名"
                      prop="username">
          <el-input v-model="AddForm.username"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱"
                      prop="email">
          <el-input v-model="AddForm.email"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="AddForm.password"
                    style="width: 80%"
                    readonly />
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="AddForm.role"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限组名称"
                      prop="permission_group_id">
          <el-select v-model.number="AddForm.permission_group_id"
                     placeholder="请选择"
                     style="width: 80%">
            <el-option label="超级管理组"
                       :value="2" />
            <el-option label="编辑组"
                       :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="phone">
          <el-input v-model="AddForm.phone"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="AddForm.introduction"
                    type="textarea"
                    style="width: 80%" />
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="handleAddClose">取 消</el-button>
        <el-button type="primary"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAddUser">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="新增用户"
               :visible="showUserEdit"
               width="50%"
               @close="handleEditClose">
      <el-form ref="form"
               :model="AddForm"
               label-width="150px">
        <el-form-item label="用户名"
                      prop="username">
          <el-input v-model="AddForm.username"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱"
                      prop="email">
          <el-input v-model="AddForm.email"
                    style="width: 80%" />
        </el-form-item>

        <el-form-item label="角色">
          <el-input v-model="AddForm.role"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限组名称"
                      prop="permission_group_id">
          <el-select v-model.number="AddForm.permission_group_id"
                     placeholder="请选择"
                     style="width: 80%">
            <el-option label="超级管理组"
                       :value="2" />
            <el-option label="编辑组"
                       :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="phone">
          <el-input v-model="AddForm.phone"
                    style="width: 80%" />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="AddForm.introduction"
                    type="textarea"
                    style="width: 80%" />
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="handleEditClose">取 消</el-button>
        <el-button type="primary"
                   style="background-color: #409eff; color:#fff"
                   @click="handleEditUser">确 定</el-button>
      </template>
    </el-dialog>
  </el-card>

</template>

<script>
import { getUserListAPI, addUserAPI, delUserAPI, getUserDetailAPI, putUserInfoAPI } from '@/api/base-users'
export default {
  name: 'UserView',
  data () {
    return {
      // 表格数据
      tableData: [],
      // 请求数据
      queryInfo: {
        page: 1,
        pagesize: 10
      },
      // 列表总数
      total: 0,
      // 控制新增弹窗显示
      showUserAdd: false,
      // 表单数据
      AddForm: {
        password: '123456',
        username: '',
        phone: '',
        permission_group_id: '',
        avatar: '',
        email: '',
        role: '',
        introduction: ''
      },
      // 控制编辑弹框
      showUserEdit: false,
      // 搜索使用的
      username: ''
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取表格数据
    async getUserList (username = '') {
      const res = await getUserListAPI({
        ...this.queryInfo,
        username
      })
      // console.log(res)
      this.total = res.counts
      this.tableData = res.list
    },
    // 自定义序号
    indexMethod (index) {
      return (index + 1) + (this.queryInfo.page - 1) * this.queryInfo.pagesize
    },
    // 条数发生变化时
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      // 重新获取列表
      this.getUserList()
    },
    // 页码发生变化时
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getUserList()
    },
    // 关闭新增弹框
    handleAddClose () {
      this.showUserAdd = false
    },
    // 新增用户
    async handleAddUser () {
      // 发请求
      await addUserAPI(this.AddForm)
      // console.log(res)
      // 关闭弹窗
      this.handleAddClose()
      // 刷新列表
      this.getUserList()
    },
    // 删除用户
    async handelUserDel (id) {
      // console.log(id)
      try {
        await this.$confirm('确定要删除嘛', '提示', {
          type: 'warning'
        })
        await delUserAPI(id)
        // console.log(res)
        // 刷新列表
        this.getUserList()
        this.$message.success('删除成功')
      } catch (e) {
        //
        this.$message.info('已取消')
      }
    },
    // 关闭编辑弹窗
    handleEditClose () {
      this.showUserEdit = false
    },
    // 打开编辑弹框
    async handleEditDia (id) {
      // 保存要编辑的用户id
      this.EditId = id
      this.showUserEdit = true
      console.log(id)
      // 发请求
      const res = await getUserDetailAPI(id)
      this.AddForm = res
    },
    // 编辑用户
    async handleEditUser () {
      // 整体校验
      // 发请求
      await putUserInfoAPI(this.EditId, {
        avatar: this.AddForm.avatar,
        email: this.AddForm.email,
        id: this.AddForm.id,
        introduction: this.AddForm.introduction,
        permission_group_id: this.AddForm.permission_group_id,
        phone: this.AddForm.phone,
        role: this.AddForm.role,
        username: this.AddForm.username
      })
      // 关闭弹窗
      this.handleEditClose()
      // 刷新页面
      this.getUserList()
      this.$message.success('编辑成功')
    },
    // 清空搜索框值
    handleEmpty () {
      this.username = ''
      this.getUserList()
    },
    handleSearch () {
      // 搜索了
      console.log('搜索了')
      this.getUserList(this.username)
      console.log(1)
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
  margin-top: 90px;
} */
.header-container {
  display: flex;
  justify-content: space-between;
  .container-left {
    display: flex;
  }
}
.el-alert {
  margin-top: 20px;
}
.el-button--primary {
  color: #409eff;
  background-color: #ecf5ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
  }
}
.el-button--danger {
  color: #f56c6c;
  background-color: #fef0f0;
  &:hover {
    color: #fef0f0;
    background-color: #f56c6c;
  }
}
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>
